<template>
  <view class="body">
    <view style="height: 35rpx;position: relative;"></view>
    <view class="cardList" v-for="(item,index) in cardList" :key="item.id">
      <view class="listItem" @click="()=>goUse(index)">
        <view class="card">
          <image class="card" :src="item.productPictureUrl"></image>
          <view class="mask" v-if="item.expiredTime < formatDate(new Date())"></view>
          <view :class="item.expiredTime >= formatDate(new Date())?'subscript':'subscript_expire'">
            {{item.expiredTime >= formatDate(new Date())?'已激活':'已过期'}}</view>
        </view>
        <view class="text_content">
          <view class="title">{{item.productName}}</view>
          <view class="card_date">有效期:{{item.paymentTime.slice(0,10)}} 至 {{item.expiredTime.slice(0,10)}}</view>
          <view class="card_number">卡号:{{item.cardNumber}}</view>
          <view class=""></view>
        </view>
        <view :class="item.expiredTime >= formatDate(new Date())?'go-use-it':'go-use-it-expire'">
          {{item.expiredTime >= formatDate(new Date())?'去使用':'已过期'}}</view>
      </view>
    </view>
    <view style="display: flex;justify-content: center;align-items: center;font-size: 28rpx;">没有更多了...</view>
    <view class="safe-bottom"></view>
    <view class="goto-active">
      <view class="button" @click="active">激活新卡</view>
    </view>
  </view>
</template>

<script setup>
  import gmCrypt from 'gm-crypt'
  import {
    onMounted,
    ref
  } from 'vue';
  import wx from "weixin-js-sdk"
  import {
    onShow
  } from '@dcloudio/uni-app';
  import {
    getMedicationCardList,
  } from "../../request/order.js"
  const cardList = ref([])
  onMounted(() => {
     getMedicationCardListDetail()
  })

  function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
  function active(){
    uni.navigateTo({
      url:"/pages/mine/activation"
    })
  }
  function goUse(index){
    uni.switchTab({
      url:"/pages/home/home"
    })
    uni.setStorageSync("index",index)
  }
  function getMedicationCardListDetail() {
    uni.showLoading({
      title:"加载中",
      mask:true
    })
    getMedicationCardList().then(res => {
      uni.hideLoading()
      cardList.value = res.data.list ?? []
      console.log("res", cardList.value)
    }).catch(err => {
       uni.hideLoading()
      console.log("Err", err)
    })
  }
</script>

<style scoped>
  .button{
    width: 610rpx;
    height: 90rpx;
    opacity: 1;
    border-radius: 100rpx;
    background: rgba(19, 136, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36tpx;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 52rpx;
    color: rgba(255, 255, 255, 1);
  }
  .safe-bottom{
    height:182rpx;
  }
  .goto-active{
    position: absolute;
    bottom: 0;
    left:0;
    width: 750rpx;
    min-height:182rpx;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .go-use-it{
    position: absolute;
    bottom: 20rpx;
    right:20rpx;
    width: 100rpx;
    height: 32rpx;
    opacity: 1;
    border-radius:100rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 126, 253, 1);
    color: rgba(255, 255, 255, 1);

  }
  .go-use-it-expire{
    position: absolute;
    bottom: 20rpx;
    right:20rpx;
    width: 100rpx;
    height: 32rpx;
    opacity: 1;
    border-radius:100rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(232, 232, 232, 1);
    color:rgba(184, 184, 184, 1);
  }
  .body {
    min-height: 100vh;
    background: rgba(250, 250, 250, 1);
    position: relative;
  }

  .cardList {
    display: flex;
    flex-direction: column;
    /* gap: 20rpx; */
    margin-bottom: 35rpx;
    position: relative;
  }

  .listItem {
    width: 680rpx;
    height: 182rpx;
    opacity: 1;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0.1rpx 0.1rpx 0.1rpx rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    display: flex;
    padding: 30rpx;
    position:relative;
  }

  .card {
    width: 96px;
    height: 64px;
    position: relative;
  }

  .text_content {
    width: 480rpx;
    height: 120rpx;
    padding-left: 30rpx;
  }

  .title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5rpx;
    line-height: 23.17px;
    color: rgba(0, 0, 0, 1);
  }

  .card_date {
    font-size: 12px;
    /* font-weight: 500; */
    letter-spacing: 0.5rpx;
    line-height: 23.17px;
    color: rgba(163, 163, 163, 1);
  }

  .card_number {
    font-size: 12px;
    /* font-weight: 500; */
    letter-spacing: 0.5rpx;
    line-height: 23.17px;
    color: rgba(163, 163, 163, 1);
  }

  .subscript {
    width: 44px;
    height: 16px;
    opacity: 1;
    border-bottom-left-radius: 20rpx;
    border-top-right-radius: 10rpx;
    background: rgba(0, 126, 253, 1);
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .subscript_expire {
    width: 44px;
    height: 16px;
    opacity: 1;
    border-bottom-left-radius: 20rpx;
    border-top-right-radius: 10rpx;
    background: rgba(232, 232, 232, 1);
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(184, 184, 184, 1);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mask {
    width: 96px;
    height: 64px;
    position: absolute;
    background: rgba(113, 113, 113, 0.3);
    ;
    border-radius: 10rpx;
    top: 0;
  }

  .button {}
</style>
